<template>
    <div>
        <page-header :title="$route.meta.title" content="" />
        <page-main>
            <el-button style="margin-bottom: 10px;" type="primary" icon="el-icon-plus" @click="onCreate">新增</el-button>
            <search-bar>
                <el-form :model="form" size="small" label-width="100px" label-suffix="：">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="店铺">
                                <el-select v-model="form.shop_id" placeholder="请选择店铺" clearable @change="getDataList">
                                    <el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="refresh">筛 选</el-button>
                    </el-form-item>
                </el-form>
            </search-bar>
            <!-- 商品编号：<el-input v-model="listData.updated_at" placeholder="输入商品编号" /> -->
            <el-table :data="listData" border stripe style="width: 100%;">
                <el-table-column prop="id" label="ID" align="center" width="50" />
                <el-table-column prop="user_name" label="所属店铺" align="center" />
                <el-table-column prop="name" label="名称" align="center" />
                <el-table-column prop="duration" label="时长" align="center" :formatter="(row) => `${row.duration}分钟`" />
                <el-table-column prop="price" label="价格" align="center" :formatter="(row) => `${row.price}元`" />
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 1" type="success">上架</el-tag>
                        <el-tag v-else type="danger">下架</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip />

                <el-table-column fixed="right" label="操作" width="210" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="onView(scope.row)">查看</el-button>
                        <el-button type="primary" size="mini" plain @click="onEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" plain @click="onDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="page.page" :total="page.total" :page-size.sync="page.size" :page-sizes.sync="page.sizes" layout="total, sizes, ->, prev, pager, next, jumper" background @size-change="refresh" @current-change="getDataList" />
        </page-main>
        <FormDialog :id="detailFormDialog.id" :visible.sync="detailFormDialog.visible" :view="formView" @success="getDataList" />
    </div>
</template>

<script>
import mixin from '@/mixins/mixin'
import FormDialog from './components/FormDialog/index'
export default {
    name: 'GoodsList',
    components: {
        FormDialog
    },
    mixins: [mixin],
    beforeRouteEnter(to, from, next) {
        // 进入页面时，先将当前页面的 name 信息存入 keep-alive 全局状态
        next(vm => {
            vm.$store.commit('keepAlive/add', 'GoodsList')
        })
    },
    beforeRouteLeave(to, from, next) {
        // 因为并不是所有的路由跳转都需要将当前页面进行缓存，例如最常见的情况，从列表页进入详情页，则需要将列表页缓存，而从列表页跳转到其它页面，则不需要将列表页缓存
        // 所以下面的代码意思就是，如果目标路由的 name 不是 detailRouterName 或 otherDetailRouterName ，则将当前页面的 name 从 keep-alive 中删除
        if (!['goodsAdd', 'goodsEdit'].includes(to.name)) {
            // 注意：上面校验的是路由的 name ，下面记录的是当前页面的 name
            this.$store.commit('keepAlive/remove', 'GoodsList')
        }
        next()
    },
    data() {
        return {
            shopOptions: [],
            dialogMode: false,
            pageRouter: {
                create: 'goodsAdd',
                edit: 'goodsEdit'
            },
            form: {
                shop_id: ''
            },
            api: {
                list: 'member/menu/tabulation',
                del: 'member/menu/delete',
                changeStatus: 'member/menu/change-status'
            }
        }
    },
    created() {
        this.getShopList()
        this.getDataList()
    },
    activated() {
        this.getDataList()
    },
    methods: {
        getShopList() {
            this.$api.post('member/member/tabulation').then(res => {
                this.shopOptions = res.data.data.map(item => {
                    return {
                        label: item.nickname,
                        value: item.id
                    }
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-pagination {
    margin-top: 20px;
}
.goods-info {
    display: flex;
    padding: 5px;
    border: 1px dashed #ececec;
    background-color: #fff;
    border-radius: 4px;
}
.goods-info-main {
    flex: 1;
}
.goods-title {
    margin-bottom: 3px;
    line-height: 1.2;
}
</style>
